<template>
  <!-- BottomTab -->
  <div class="bottomTab" v-if="botshow">
    <div class="bottomedTab" v-for="(pro,index) in botTab" :key="index">
      <div class="bottomTab-new" @click="onChange(pro.path,routertitle.path)"
           :style="`color:${routertitle.path===pro.path?botcolor.sltcolor:botcolor.color}`">
        <div class="bottomTab-content">
          <div class="bottommost">
            <i class="iconfont" :class="routertitle.path===pro.path?pro.iconcat:pro.icon"/>
          </div>
          <div class="bottommost-text">
            {{ pro.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: "BottomTab",
  props: {
    botTab: {
      type: Object,
      default: ''
    },
    botcolor: {
      type: Object,
      default: ''
    },
    botshow: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    onChange: function (path, routerpath) {
      if (routerpath === path) return
      this.$router.replace({path:path,replace:true})
    }
  },
  mounted() {
    // console.log(this.botTab)
  },
  computed: {
    ...mapState(
        // 映射 this.routertitle 为 this.$store.state.routertitle
        ['routertitle'],
    ),
  },
}
</script>

<style scoped lang="less">
.bottomTab {
  display: flex;
  box-sizing: content-box;
  width: 100%;
  height: 48px;
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff;
  z-index: 1;
  bottom: 0;
  left: 0;
  position: fixed;
  box-shadow: 0 0 10px 0 hsla(0, 6%, 58%, .6);

  .bottomedTab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    .bottomTab-new {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      .bottomTab-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;

        div {
          width: 100%;
          text-align: center;
          font-size: 12px;
        }

        .iconfont {
          font-size: 18px;
        }

        .bottommost-text {
          margin-top: 6px;
        }
      }
    }
  }
}
</style>
